<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BioXplorer - 生物信息学分析与创新平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #1a73e8;
            --primary-dark: #0d47a1;
            --secondary: #26a69a;
            --light: #f8f9fa;
            --dark: #343a40;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --gray: #6c757d;
            --border: #dee2e6;
            --titlebar-height: 32px;
            --menu-height: 30px;
            --toolbar-height: 40px;
            --statusbar-height: 22px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: var(--dark);
            line-height: 1.4;
            overflow: hidden;
        }

        /* 标题栏 */
        .titlebar {
            height: var(--titlebar-height);
            background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            -webkit-app-region: drag;
            user-select: none;
        }

        .titlebar .app-info {
            display: flex;
            align-items: center;
            font-size: 12px;
        }

        .titlebar .app-info i {
            margin-right: 8px;
            color: var(--primary);
        }

        .titlebar .window-controls {
            display: flex;
            -webkit-app-region: no-drag;
        }

        .window-controls button {
            background: none;
            border: none;
            color: white;
            width: 32px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .window-controls button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .window-controls .close:hover {
            background-color: #e81123;
        }

        /* 菜单栏 */
        .menubar {
            height: var(--menu-height);
            background-color: #f8f9fa;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 13px;
            user-select: none;
        }

        .menubar .menu-item {
            padding: 5px 12px;
            cursor: pointer;
            border-radius: 3px;
        }

        .menubar .menu-item:hover {
            background-color: #e9ecef;
        }

        /* 工具栏 */
        .toolbar {
            height: var(--toolbar-height);
            background-color: white;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 10px;
            gap: 5px;
        }

        .toolbar button {
            background: none;
            border: 1px solid transparent;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 13px;
        }

        .toolbar button i {
            margin-right: 5px;
        }

        .toolbar button:hover {
            background-color: #f8f9fa;
            border-color: var(--border);
        }

        .toolbar .separator {
            width: 1px;
            height: 20px;
            background-color: var(--border);
            margin: 0 10px;
        }

        /* 主容器 */
        .container {
            display: flex;
            height: calc(100vh - var(--titlebar-height) - var(--menu-height) - var(--toolbar-height) - var(--statusbar-height));
        }

        /* 侧边栏 */
        .sidebar {
            width: 200px;
            background-color: white;
            border-right: 1px solid var(--border);
            padding: 10px 0;
            overflow-y: auto;
        }

        .sidebar-section {
            margin-bottom: 15px;
        }

        .sidebar-section h3 {
            font-size: 12px;
            font-weight: 600;
            color: var(--gray);
            padding: 5px 15px;
            text-transform: uppercase;
        }

        .sidebar-item {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            cursor: pointer;
            font-size: 13px;
            transition: background-color 0.2s;
        }

        .sidebar-item i {
            margin-right: 8px;
            width: 16px;
            text-align: center;
            color: var(--gray);
        }

        .sidebar-item:hover {
            background-color: #f8f9fa;
        }

        .sidebar-item.active {
            background-color: #e3f2fd;
            color: var(--primary);
            border-right: 3px solid var(--primary);
        }

        .sidebar-item.active i {
            color: var(--primary);
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 标签页 */
        .tabs {
            display: flex;
            background-color: #f8f9fa;
            border-bottom: 1px solid var(--border);
            padding: 0 10px;
        }

        .tab {
            padding: 8px 15px;
            font-size: 13px;
            cursor: pointer;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            margin-right: 2px;
            display: flex;
            align-items: center;
        }

        .tab i {
            margin-right: 5px;
        }

        .tab.active {
            background-color: white;
            border-color: var(--border);
            color: var(--primary);
        }

        .tab .close-tab {
            margin-left: 8px;
            opacity: 0.6;
        }

        .tab .close-tab:hover {
            opacity: 1;
        }

        /* 工作区 */
        .workspace {
            flex: 1;
            background-color: white;
            padding: 20px;
            overflow-y: auto;
        }

        /* 面板 */
        .panel {
            margin-bottom: 20px;
            border: 1px solid var(--border);
            border-radius: 4px;
        }

        .panel-header {
            background-color: #f8f9fa;
            padding: 10px 15px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-content {
            padding: 15px;
        }

        /* 文件树 */
        .file-tree {
            font-size: 13px;
        }

        .file-tree ul {
            list-style: none;
            padding-left: 15px;
        }

        .file-tree li {
            padding: 3px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .file-tree li i {
            margin-right: 5px;
            color: var(--gray);
        }

        .file-tree li:hover {
            background-color: #f8f9fa;
        }

        /* 表格 */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        th, td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        /* 状态栏 */
        .statusbar {
            height: var(--statusbar-height);
            background-color: #f8f9fa;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            font-size: 12px;
            color: var(--gray);
        }

        .statusbar .status-item {
            display: flex;
            align-items: center;
        }

        .statusbar .status-item i {
            margin-right: 5px;
        }

        /* 按钮 */
        .btn {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            background-color: #f8f9fa;
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }

        .btn i {
            margin-right: 5px;
        }

        .btn:hover {
            background-color: #e9ecef;
        }

        .btn-primary {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        /* 表单控件 */
        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            font-size: 13px;
        }

        .form-control {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 13px;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
        }

        /* 分析面板 */
        .analysis-panel {
            display: none;
        }

        .analysis-panel.active {
            display: block;
        }

        /* 可视化区域 */
        .visualization-area {
            height: 300px;
            background-color: #f8f9fa;
            border: 1px solid var(--border);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
        }

        /* 工具网格 */
        .tool-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }

        .tool-card {
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tool-card:hover {
            border-color: var(--primary);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .tool-card.selected {
            border-color: var(--primary);
            background-color: #e3f2fd;
        }

        .tool-icon {
            font-size: 24px;
            color: var(--primary);
            margin-bottom: 10px;
        }

        /* 进度条 */
        .progress-bar {
            height: 6px;
            background-color: #e9ecef;
            border-radius: 3px;
            overflow: hidden;
            margin: 10px 0;
        }

        .progress {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
            transition: width 0.3s;
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <div class="titlebar">
        <div class="app-info">
            <i class="fas fa-dna"></i>
            <span>BioXplorer - 生物信息学分析与创新平台</span>
        </div>
        <div class="window-controls">
            <button class="minimize"><i class="fas fa-window-minimize"></i></button>
            <button class="maximize"><i class="far fa-window-maximize"></i></button>
            <button class="close"><i class="fas fa-times"></i></button>
        </div>
    </div>

    <!-- 菜单栏 -->
    <div class="menubar">
        <div class="menu-item">文件(F)</div>
        <div class="menu-item">编辑(E)</div>
        <div class="menu-item">视图(V)</div>
        <div class="menu-item">工具(T)</div>
        <div class="menu-item">分析(A)</div>
        <div class="menu-item">窗口(W)</div>
        <div class="menu-item">帮助(H)</div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
        <button><i class="fas fa-folder-plus"></i> 新建项目</button>
        <button><i class="fas fa-folder-open"></i> 打开项目</button>
        <button><i class="fas fa-save"></i> 保存</button>
        <div class="separator"></div>
        <button><i class="fas fa-file-import"></i> 导入数据</button>
        <button><i class="fas fa-file-export"></i> 导出结果</button>
        <div class="separator"></div>
        <button><i class="fas fa-play"></i> 运行分析</button>
        <button><i class="fas fa-stop"></i> 停止</button>
        <div class="separator"></div>
        <button><i class="fas fa-chart-bar"></i> 可视化</button>
        <button><i class="fas fa-cog"></i> 设置</button>
    </div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-section">
                <h3>分析工具</h3>
                <div class="sidebar-item active" data-panel="genomics">
                    <i class="fas fa-dna"></i>
                    <span>基因序列分析</span>
                </div>
                <div class="sidebar-item" data-panel="proteomics">
                    <i class="fas fa-atom"></i>
                    <span>蛋白质结构分析</span>
                </div>
                <div class="sidebar-item" data-panel="alignment">
                    <i class="fas fa-align-left"></i>
                    <span>序列比对</span>
                </div>
                <div class="sidebar-item" data-panel="phylogeny">
                    <i class="fas fa-sitemap"></i>
                    <span>进化树分析</span>
                </div>
            </div>

            <div class="sidebar-section">
                <h3>项目管理</h3>
                <div class="sidebar-item" data-panel="projects">
                    <i class="fas fa-folder"></i>
                    <span>项目文件</span>
                </div>
                <div class="sidebar-item" data-panel="results">
                    <i class="fas fa-chart-bar"></i>
                    <span>分析结果</span>
                </div>
                <div class="sidebar-item" data-panel="history">
                    <i class="fas fa-history"></i>
                    <span>分析历史</span>
                </div>
            </div>

            <div class="sidebar-section">
                <h3>数据资源</h3>
                <div class="sidebar-item" data-panel="databases">
                    <i class="fas fa-database"></i>
                    <span>公共数据库</span>
                </div>
                <div class="sidebar-item" data-panel="samples">
                    <i class="fas fa-vial"></i>
                    <span>示例数据</span>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 标签页 -->
            <div class="tabs">
                <div class="tab active">
                    <i class="fas fa-home"></i> 主工作区
                    <span class="close-tab"><i class="fas fa-times"></i></span>
                </div>
                <div class="tab">
                    <i class="fas fa-dna"></i> 序列分析结果
                    <span class="close-tab"><i class="fas fa-times"></i></span>
                </div>
                <div class="tab">
                    <i class="fas fa-atom"></i> 蛋白质结构
                    <span class="close-tab"><i class="fas fa-times"></i></span>
                </div>
            </div>

            <!-- 工作区 -->
            <div class="workspace">
                <!-- 基因序列分析面板 -->
                <div id="genomics" class="analysis-panel active">
                    <div class="panel">
                        <div class="panel-header">
                            <span>基因序列分析工具</span>
                            <button class="btn btn-primary"><i class="fas fa-play"></i> 运行分析</button>
                        </div>
                        <div class="panel-content">
                            <div class="form-group">
                                <label class="form-label">选择序列文件</label>
                                <div style="display: flex; gap: 10px;">
                                    <input type="text" class="form-control" placeholder="未选择文件" readonly>
                                    <button class="btn"><i class="fas fa-folder-open"></i> 浏览</button>
                                </div>
                            </div>

                            <div class="tool-grid">
                                <div class="tool-card selected">
                                    <i class="fas fa-align-left tool-icon"></i>
                                    <h4>序列比对</h4>
                                    <p>BLAST, Clustal Omega</p>
                                </div>
                                <div class="tool-card">
                                    <i class="fas fa-sitemap tool-icon"></i>
                                    <h4>进化树构建</h4>
                                    <p>PhyML, RAxML, FastTree</p>
                                </div>
                                <div class="tool-card">
                                    <i class="fas fa-vial tool-icon"></i>
                                    <h4>引物设计</h4>
                                    <p>PCR引物设计与验证</p>
                                </div>
                                <div class="tool-card">
                                    <i class="fas fa-code tool-icon"></i>
                                    <h4>ORF查找</h4>
                                    <p>开放阅读框识别与翻译</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">分析参数</label>
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                                    <div>
                                        <label class="form-label">E-value 阈值</label>
                                        <input type="text" class="form-control" value="0.001">
                                    </div>
                                    <div>
                                        <label class="form-label">比对算法</label>
                                        <select class="form-control">
                                            <option>BLAST</option>
                                            <option>Clustal Omega</option>
                                            <option>MAFFT</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="visualization-area">
                                <div style="text-align: center;">
                                    <i class="fas fa-dna" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
                                    <p>基因序列分析可视化区域</p>
                                    <p>运行分析后，结果将在此显示</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 蛋白质结构分析面板 -->
                <div id="proteomics" class="analysis-panel">
                    <div class="panel">
                        <div class="panel-header">
                            <span>蛋白质结构分析</span>
                            <button class="btn btn-primary"><i class="fas fa-play"></i> 运行预测</button>
                        </div>
                        <div class="panel-content">
                            <div class="form-group">
                                <label class="form-label">蛋白质序列或结构文件</label>
                                <div style="display: flex; gap: 10px;">
                                    <input type="text" class="form-control" placeholder="未选择文件" readonly>
                                    <button class="btn"><i class="fas fa-folder-open"></i> 浏览</button>
                                </div>
                            </div>

                            <div class="tool-grid">
                                <div class="tool-card">
                                    <i class="fas fa-calculator tool-icon"></i>
                                    <h4>序列分析</h4>
                                    <p>理化性质计算</p>
                                </div>
                                <div class="tool-card selected">
                                    <i class="fas fa-project-diagram tool-icon"></i>
                                    <h4>二级结构预测</h4>
                                    <p>PSIPRED, Jpred</p>
                                </div>
                                <div class="tool-card">
                                    <i class="fas fa-cube tool-icon"></i>
                                    <h4>三级结构预测</h4>
                                    <p>同源建模, AlphaFold2</p>
                                </div>
                                <div class="tool-card">
                                    <i class="fas fa-map-marker-alt tool-icon"></i>
                                    <h4>结合位点预测</h4>
                                    <p>活性位点识别</p>
                                </div>
                            </div>

                            <div class="visualization-area">
                                <div style="text-align: center;">
                                    <i class="fas fa-atom" style="font-size: 48px; color: #ccc; margin-bottom: 15px;"></i>
                                    <p>蛋白质3D结构可视化</p>
                                    <p>上传PDB文件或运行预测后显示3D模型</p>
                                </div>
                            </div>

                            <div style="display: flex; justify-content: space-between; margin-top: 15px;">
                                <div>
                                    <button class="btn"><i class="fas fa-sync-alt"></i> 重置视图</button>
                                    <button class="btn"><i class="fas fa-download"></i> 导出结构</button>
                                </div>
                                <div>
                                    <button class="btn"><i class="fas fa-eye"></i> 卡通模式</button>
                                    <button class="btn"><i class="fas fa-atom"></i> 球棍模式</button>
                                    <button class="btn"><i class="fas fa-square"></i> 表面模式</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 项目文件面板 -->
                <div id="projects" class="analysis-panel">
                    <div class="panel">
                        <div class="panel-header">
                            <span>项目文件</span>
                            <button class="btn"><i class="fas fa-plus"></i> 新建文件夹</button>
                        </div>
                        <div class="panel-content">
                            <div class="file-tree">
                                <ul>
                                    <li><i class="fas fa-folder-open"></i> 当前项目
                                        <ul>
                                            <li><i class="fas fa-folder"></i> 原始数据
                                                <ul>
                                                    <li><i class="fas fa-file-code"></i> sequence_1.fasta</li>
                                                    <li><i class="fas fa-file-code"></i> sequence_2.fastq</li>
                                                </ul>
                                            </li>
                                            <li><i class="fas fa-folder"></i> 分析结果
                                                <ul>
                                                    <li><i class="fas fa-file-alt"></i> blast_results.xml</li>
                                                    <li><i class="fas fa-file-image"></i> phylogenetic_tree.png</li>
                                                </ul>
                                            </li>
                                            <li><i class="fas fa-file-alt"></i> 项目说明.txt</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态栏 -->
    <div class="statusbar">
        <div class="status-item">
            <i class="fas fa-info-circle"></i>
            <span>就绪</span>
        </div>
        <div class="status-item">
            <i class="fas fa-microchip"></i>
            <span>CPU: 12% | 内存: 2.3GB/16GB</span>
        </div>
        <div class="status-item">
            <i class="fas fa-database"></i>
            <span>本地数据库连接正常</span>
        </div>
    </div>

    <script>
        // 侧边栏导航
        document.addEventListener('DOMContentLoaded', function() {
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            const analysisPanels = document.querySelectorAll('.analysis-panel');
            
            sidebarItems.forEach(item => {
                item.addEventListener('click', function() {
                    const panelId = this.getAttribute('data-panel');
                    
                    // 更新活跃侧边栏项
                    sidebarItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应面板
                    analysisPanels.forEach(panel => panel.classList.remove('active'));
                    document.getElementById(panelId).classList.add('active');
                });
            });
            
            // 工具卡片选择
            const toolCards = document.querySelectorAll('.tool-card');
            toolCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 在同一工具组内只选择一个
                    const parent = this.parentElement;
                    if (parent.classList.contains('tool-grid')) {
                        const siblings = parent.querySelectorAll('.tool-card');
                        siblings.forEach(s => s.classList.remove('selected'));
                    }
                    this.classList.add('selected');
                });
            });
            
            // 标签页功能
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
                
                // 关闭标签页
                const closeBtn = tab.querySelector('.close-tab');
                if (closeBtn) {
                    closeBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        // 在实际应用中，这里会移除标签页
                        tab.style.display = 'none';
                    });
                }
            });
            
            // 窗口控制按钮（模拟）
            const minimizeBtn = document.querySelector('.minimize');
            const maximizeBtn = document.querySelector('.maximize');
            const closeBtn = document.querySelector('.close');
            
            minimizeBtn.addEventListener('click', () => {
                alert('在实际桌面应用中，窗口将最小化到任务栏');
            });
            
            maximizeBtn.addEventListener('click', () => {
                alert('在实际桌面应用中，窗口将最大化或还原');
            });
            
            closeBtn.addEventListener('click', () => {
                if (confirm('确定要退出 BioXplorer 吗？')) {
                    alert('在实际桌面应用中，应用程序将关闭');
                }
            });
        });
    </script>
</body>
</html>